<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>
    <meta charset="utf-8">

    <title>华系技术研究院</title>

    <!-- Behavioral Meta Data -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Core Meta Data -->
    <meta name="author" content="Aether-Themes">
    <meta name="description" content="HUAICT">
    <meta name="keywords" content="HUAICT">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="__PUBLIC__favicon.ico" media="screen" />

    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57-precomposed.png">

    <!--[if lt IE 9]>
    {load href="http://html5shim.googlecode.com/svn/trunk/html5.js" /}
    <![endif]-->

    <!-- Fonts -->

    <!-- Styles -->
    {load href="/home/css/loader.css"/}
    {load href="/home/css/framework.css"/}
    {load href="/home/css/style.css"/}

    <!-- Colors -->
    {load href="/home/css/colors/cyan.css" /}
    <!-- <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen"> -->
    <!-- <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green" media="screen"> -->
    <!-- <link rel="stylesheet" type="text/css" href="css/colors/pink.css" title="pink" media="screen"> -->
    <!-- <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen"> -->

    <!--[if lt IE 9]>
    {load href="/home/css/ie.css" /}
    <![endif]-->

    <!-- Javascript -->
    {load href="/home/js/modernizr.js"  /}
    {load href="/home/js/jquery.js"  /}
</head>
<body>
<section id="hero">
    <ul id="scene" class="scene"
        data-friction-x="0.1"
        data-friction-y="0.1"
        data-scalar-x="25"
        data-scalar-y="15"
    >
        <li class="layer" data-depth="0.00"></li>

        <!-- BG -->
        <li class="layer" data-depth="0.10" ><div class="background" data-0="transform: translate3d(0px, 0px, 0px);" data-top-bottom="transform: translate3d(0px, 300%, 0px);"></div></li>
        <li class="layer" data-depth="0.15"><div class="triangles"></div></li>
        <li class="layer" data-depth="0.25"><div class="sphere" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/sphere.png" alt="sphere"></div></li>

        <!-- Hero -->
        <li class="layer" data-depth="0.20"><div class="title" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img class="has-retina" src="/home/images/logo.png" alt="Opia"><span class="line"></span></div></li>
        <li class="layer" data-depth="0.30">
            <div class="hero-content" data-0="opacity: 1;" data-top-bottom="opacity: 0;">
                <h1>ICT融合解决方案</h1>
                <p class="sub-title">以卓越品质铸就品牌价值！</p>
            </div>
        </li>

        <!-- Flakes -->
        <li class="layer" data-depth="0.40">
            <div class="depth-1 flake1" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth1/flakes1.png" alt="flake"></div>
            <div class="depth-1 flake2" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth1/flakes2.png" alt="flake"></div>
            <div class="depth-1 flake3" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth1/flakes3.png" alt="flake"></div>
            <div class="depth-1 flake4" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth1/flakes4.png" alt="flake"></div>
        </li>
        <li class="layer" data-depth="0.50">
            <div class="depth-2 flake1" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth2/flakes1.png" alt="flake"></div>
            <div class="depth-2 flake2" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth2/flakes2.png" alt="flake"></div>
        </li>
        <li class="layer" data-depth="0.60">
            <div class="depth-3 flake1" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth3/flakes1.png" alt="flake"></div>
            <div class="depth-3 flake2" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth3/flakes2.png" alt="flake"></div>
            <div class="depth-3 flake3" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth3/flakes3.png" alt="flake"></div>
            <div class="depth-3 flake4" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth3/flakes4.png" alt="flake"></div>
        </li>
        <li class="layer" data-depth="0.80"><div class="depth-4" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth4/flakes.png" alt="flake"></div></li>
        <li class="layer" data-depth="1.00"><div class="depth-5" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="/home/images/flakes/depth5/flakes.png" alt="flake"></div></li>
    </ul>
    <a id="action" href="#intro"></a>
</section>

<section id="intro" class="container center padded">

    <!-- Intro -->
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
            <h3>关于我们</h3>
            <span class="line"></span>
            <h2>华系技术研究院</h2>
            <p>Ten years of experience building the web.We believe in the power of simple, effective design, and believe that power should be wielded by all. We aim to discover and deconstruct — to break things down and build them better.</p>
        </div>
    </div>

</section>

<section class="container padded-bottom center-mobile relative list">

    <!-- Blocks -->
    <div class="row">
        <div class="block col-xs-12 col-sm-5">
            <i class="icon icon-basic-eye"></i>
            <h3>Branding &amp; positioning</h3>
            <p>Understanding who you are and what you want is our strategy for your brand. We are always figuring out ways to capture your vision, so people can get on board.</p>
        </div>
        <div class="block col-xs-12 col-sm-5 col-sm-offset-2">
            <i class="icon icon-basic-webpage-img-txt"></i>
            <h3>Web design &amp; development</h3>
            <p>We've got your front end and back end needs covered. We're always looking for strategies to make your brand's needs fit with today's development languages.</p>
        </div>
    </div>

    <span class="separator"></span>

    <!-- Blocks -->
    <div class="row">
        <div class="block col-xs-12 col-sm-5">
            <i class="icon icon-basic-photo"></i>
            <h3>Photogprahy</h3>
            <p>Yep, say cheese. Finding ways to help tell your story through photography is a powerful tool to make your branded content stand out from the rest.</p>
        </div>
        <div class="col-xs-12 col-sm-5 col-sm-offset-2">
            <i class="icon icon-basic-share"></i>
            <h3>Social Strategy</h3>
            <p>This a powerful outlet that constantly gets overlooked. We strive to figure out ways to help your audience grow through all social platforms.</p>
        </div>
    </div>
</section>

<section class="full padded-top center dark" style="background-image: url(images/dark-image.jpg);">
    <div class="container">

        <!-- Intro -->
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
                <h3>解决方案</h3>
                <span class="line"></span>
                <h2>It’s not a job, It’s a life.</h2>
                <p>We create experiences that transform brands &amp; grow businesses.</p>
            </div>
        </div>

        <!-- Folio pt.1 -->
        <div class="row">
            <div class="col-xs-12 padded-top">
                <ul class="folio-list">
                    <li><a class ="lightbox" href="/home/images/portfolio/project1.jpg" title="Caption goes here."><img src="/home/images/portfolio/project1.jpg" alt="thumbnail"></a></li>
                    <li><a class ="lightbox" href="/home/images/portfolio/project2.jpg" title="Caption goes here."><img src="/home/images/portfolio/project2.jpg" alt="thumbnail"></a></li>
                    <li><a class ="lightbox" href="/home/images/portfolio/project3.jpg" title="Caption goes here."><img src="/home/images/portfolio/project3.jpg" alt="thumbnail"></a></li>
                </ul>
            </div>
        </div>
    </div>
</section>

<section class="full padded-bottom center" style="background-image: url(images/light-image.jpg);">
    <div class="container">

        <!-- Folio pt.2 -->
        <div class="row">
            <div class="col-xs-12 padded-bottom">
                <ul class="folio-list dropshadow">
                    <li><a class ="lightbox" href="/home/images/portfolio/project4.jpg" title="Caption goes here."><img src="/home/images/portfolio/project4.jpg" alt="thumbnail"></a></li>
                    <li><a class ="lightbox" href="/home/images/portfolio/project5.jpg" title="Caption goes here."><img src="/home/images/portfolio/project5.jpg" alt="thumbnail"></a></li>
                    <li><a class ="lightbox" href="/home/images/portfolio/project6.jpg" title="Caption goes here."><img src="/home/images/portfolio/project6.jpg" alt="thumbnail"></a></li>
                </ul>
            </div>
        </div>

        <!-- Quote -->
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
                <span class="large-accent">“</span>
                <h2>They take time to deeply understand what the product is trying to communicate.</h2>
                <span class="line no-accent"></span>
                <h3>Johnny Doeson</h3>
                <h4>Raspberry</h4>
            </div>
        </div>
    </div>
</section>

<section class="container padded center">

    <!-- Subscribe -->
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
            <h3>联系方式</h3>
            <span class="line"></span>
            <p>Be the first to know when we launch our site.</p>

            <form id="contact" name="contact" method="post" novalidate="novalidate">
                <fieldset>
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" />
                    <label for="email">Email</label>
                    <input type="email" name="email" id="email" />
                    <label for="message">Message</label>
                    <textarea name="message" id="message"></textarea>
                    <input id="submit" type="submit" name="submit" value="Send Email">
                </fieldset>
            </form>

            <div id="success">
                <p>Your message was sent successfully! I will be in touch as soon as I can.</p>
            </div>

            <div id="error">
                <p>Something went wrong, try refreshing and submitting the form again.</p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="row padded">
        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
            <span class="line no-accent"></span>
            <form
                    id="subscribe-form"
                    action="http://aetherthemes.us7.list-manage.com/subscribe/post-json?u=3b994f728c0aecbabc6fa83cf&amp;id=f01ff8561c"
                    method="get">

                <input type="submit" value="Subscribe" name="subscribe" class="submit" id="subscribe">

                <div id="subscribe-result"></div>
            </form>
            <!--模拟了个扫码支付，其实还是公众号支付，只是把入口做成了个二维码-->
            <div>
                <p>开源项目捐赠</p>
            </div>
            <img src="{:url('home/index/donateqrcode')}">
            <ul class="social-list padded">
                <li><a href="#">微博</a></li>
                <li><a href="#">微信</a></li>
                <li><a href="#">工信部</a></li>
                <li><a href="#">ICT联盟</a></li>
            </ul>
            <p class="copyright">© 2016-2017 HUAICT. All rights reserved.<br>Make something you love.</p>
        </div>
    </div>
</section>

<!-- Begin Pageloader -->
<div id="pageloader">
    <!-- Content -->
    <div class="pageloader-content">
        <h4>Loading...</h4>
        <span class="progress"></span>
    </div><!-- END Content -->
</div><!-- END Pageloader -->

<!-- Javascript -->
{load href="/home/js/loader.js" /}
{load href="/home/js/parallax.js" /}
{load href="/home/js/plugins.js" /}
{load href="/home/js/main.js" /}
</body>
</html>